<template>
  <div class="questionnaire_report_detail" v-loading="loading">
    <div class="top">
      <div class="search">
        <el-form  label-position="top">
          <el-form-item :label="$t('report.createTime')">
            <el-date-picker size="mini"
              :id="'report_date' + Math.random()"
              v-model="value4"
              type="daterange"
              :picker-options="pickerOptions"
              :placeholder="$t('report.choTimeScope')"
              :editable="boolean"
              align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('report.tempId')">
            <el-select size="mini" v-model="query.temp_id" @change = "change">
              <el-option
                v-for="item in options"
                :label="item.label"
                :key="item.value"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('report.batchNo')">
            <el-select size="mini" filterable multiple v-model="query.batchNos" :placeholder="$t('report.byBatchNoSearch')">
              <el-option
                v-for="item in options1"
                :label="item.label"
                :key="item.id"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form  label-position="top" style="margin: 14px 0 34px">
          <el-form-item :label="$t('report.lastUpdateTime')">
            <el-date-picker size="mini"
              v-model="value3"
              :id="'ques_' + Math.random()"
              type="daterange"
              :picker-options="pickerOptions"
              :placeholder="$t('report.choTimeScope')"
              :editable="boolean"
              align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('report.returnVisit')">
            <el-select size="mini" v-model="query.ques_id" filterable multiple :placeholder="$t('report.byReturnVisitSearch')">
              <el-option
                v-for="item in options2"
                :label="item.label"
                :key="item.value"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('report.batchRemark')">
            <el-select size="mini" v-model="query.batchRemarks" filterable multiple :placeholder="$t('report.byRatchRemarkSearch')">
              <el-option
                v-for="item in options3"
                :label="item.label"
                :key="item.id"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" class="primary_btn fr find" @click="search">{{$t('public.search2')}}</el-button>
        </el-form>
      </div>
      <affix :label="$t('report.questionnaireReportQuestionDetail')"></affix>
      <!-- <div class="export">
        <el-button type="primary" class="primary_btn fr report_excel_btn" @click="excels">{{$t('report.exportXls')}}</el-button>
        <el-button type="primary" class="primary_btn fr pdf" @click="exportPdf">{{$t('report.exportPDF')}}</el-button>
      </div> -->
    </div>
    <div :id = "id">
      <div v-for = "(item, index) in items" :class="index > 1 ? hide : ''" class="pie" :key="index">
        <h3 class="title"><span class="text">{{returnData[index].name}} : {{returnData[index].context}} {{$t('report.resultRatioMap')}}</span></h3>
        <el-row class="ichars" v-if="!item.hOptionsO">
          <highcharts :options="item.hOptions" style="width: 800px; margin: 0 auto"></highcharts>
        </el-row>
        <el-row class="ichars" v-else :gutter="20">
          <el-col :span="12">
            <highcharts :options="item.hOptions" :style="{ width: width }"></highcharts>
          </el-col>
          <el-col :span="12">
          <highcharts :options="item.hOptionsO" :style="{ width: width }"></highcharts>
          </el-col>
        </el-row>
      </div>
      <div class="notes">
        <span class="light">{{$t('report.hicharsNotes')}}: <span></span>{{$t('report.hicharsLight')}}</span>
        <span class="dark"><span></span>{{$t('report.hicharsDark')}}</span>
      </div>
      <div class="toggle" @click = "toggle" v-show = "unfolded">
        <p v-show = "isNone">
          <span class="tex"><i class="iconfont icon-shouqi"></i>
          </span><span class="text">{{$t('report.putPieCharts')}}</span>
        </p>
        <p v-show = "!isNone">
          <span class="tex"><i class="iconfont icon-zhankai1"></i></i></span>
          <span class="text">{{$t('report.expandPieCharts')}}</span>
        </p>
      </div>
      <div class="tab">
        <div class="export">

          <!-- <el-button class="primary_btn fr report_excel_btn"
            v-if="$store.getters.exportFromEnd"
            @click="excels"
          >{{$t('report.exportXls')+($store.state.xlsxExportMode==='Both'?'(旧)':'')}}</el-button> -->

          <el-button class="primary_btn fr report_excel_btn"
            @click="exportXlsx"
          >{{$t('report.exportXls')}}</el-button>

          <el-button class="primary_btn fr pdf" @click="exportPdf">{{$t('report.exportPDF')}}</el-button>
        </div>
        <div class="deploy">
          <el-collapse accordion>
            <el-collapse-item>
              <template slot="title">
                <span class="fl explain">{{$t('report.toggleInstructe')}}</span>
              </template>
              <div>
                {{$t('report.opportunity')}} <br>
                {{$t('report.singleVolumeRatio')}}
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
          <table v-if="returnDataOne.length">
            <template v-for = "item in returnDataOne" >
              <tr class="th">
                <td rowspan="4" class="tdO" v-if="item.single">{{item.name}}</td>
                <td rowspan="3" class="tdO" v-if="!item.single">{{item.name}}</td>
                <td>{{$t('report.questionResult')}}</td>
                <td v-for="conte in item.quesAnswerTableHeader.Config">{{conte.displayname}}</td>
                <td
                  v-if= "item.quesAnswerTableHeader.Config.length < configLength"
                  v-for="(no, index) in (configLength - item.quesAnswerTableHeader.Config.length)">{{nos[index] ? nos[index].message : '--'}}</td>
                <td>{{$t('report.resultTotal')}}</td>
                <td>{{$t('report.totalAmount')}}</td>
              </tr>
              <tr >
                <td>{{$t('report.count')}}</td>
                <td v-for="(number, index) in item.quesAnswerTableHeader.Config">{{ item.data ? item.data[number.name] : 0 }}</td>
                <td v-if= "item.quesAnswerTableHeader.Config.length < configLength"
                  v-for="(no, index) in (configLength - item.quesAnswerTableHeader.Config.length)">{{nos[index] ? nos[index].message : '--'}}</td>
                <td>{{item._totalQuesAnswers ? item._totalQuesAnswers : 0}}</td>
                <td>{{item._totalQuesSubmitNums ? item._totalQuesSubmitNums : 0}}</td>
              </tr>
              <tr class="td">
                <td>{{$t('report.Opportunity')}}</td>
                <td v-for="(abc, index) in item.quesAnswerTableHeader.Config">{{
                (item._totalQuesAnswers == 0 || !item._totalQuesAnswers) ? '0%' : ((item.data[abc.name] / item._totalQuesAnswers) * 100).toFixed(1)+'%'}}</td>
                <td v-if= "item.quesAnswerTableHeader.Config.length < configLength"
                  v-for="(no, index) in (configLength - item.quesAnswerTableHeader.Config.length)">{{nos[index] ? nos[index].message : '--'}}</td>
                <td>--</td>
                <td>--</td>
              </tr>
              <tr v-if="item.single">
                <td>{{$t('report.singleRadio')}}</td>
                <td v-for="(abc, index) in item.quesAnswerTableHeader.Config">{{
                (item._totalQuesSubmitNums == 0 || !item._totalQuesSubmitNums) ? '0%' : ((item.data[abc.name] / item._totalQuesSubmitNums) * 100).toFixed(1)+'%'}}</td>
                <td v-if= "item.quesAnswerTableHeader.Config.length < configLength"
                  v-for="(no, index) in (configLength - item.quesAnswerTableHeader.Config.length)">{{nos[index] ? nos[index].message : '--'}}</td>
                <td>--</td>
                <td>--</td>
              </tr>
            </template>
          </table>
          <no-date v-if="!returnDataOne.length"></no-date>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" :title="$t('report.reportExportHelp')" :visible.sync="dialogVisible" width="30%">
      <span>{{$t('report.reportExportTipTitle')}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button class="primary_btn" @click="dialogVisible = false">{{$t('public.cancel')}}</el-button>
        <el-button class="primary_btn" type="primary" @click="confirm">{{$t('public.confirm')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import affix from '../../../ui-modules/affix/Affix.vue'
  import noDate from '../base/noDate.vue'
  import {exportReportPdf, colorConfigArr} from '@/utils/reportUtils.js'
  import {getDateTime, deepClone, getCache} from '@/utils/m7Utils.js'
  import * as XlsxUtil from 'src/utils/XlsxUtil.umd.js'
  export default {
    name: 'questionnaire_report_return',
    data () {
      return {
        loading: false,
        width: '',
        hide: 'hide',
        options: [],
        isNone: false,
        batchNumber: [],
        returnVisitQes: [],
        batchInstructions: [],
        returnData: [],
        query: {
          reportType: 'questionnaire_report_question_detail',
          temp_id: '',
          ques_id: [],
          batchNos: [],
          batchRemarks: [],
          create_time_begin: '',
          create_time_end: '',
          return_time_begin: '',
          return_time_end: ''
        },
        dialogVisible: false,
        id: 'questionnaire_report_return',
        value1: '',
        value2: '',
        value3: '',
        value5: '',
        boolean: false,
        pickerOptions: {
          shortcuts: [{
            text: this.$t('sms.thisOneWeek'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisOneMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisThreeMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        value4: '',
        sum: [],
        headOptions: {},
        serveNumData: [],
        options24out: {
          chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
          },
          colors: colorConfigArr,
          title: { text: this.$t('report.Opportunity') },
          tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {}
              },
              showInLegend: true
            }
          },
          legend: {
            align: 'center',
            verticalAlign: 'top',
            y: 30
          },
          credits: {
            enabled: false,
            text: ''
          },
          series: []
        },
        options24out1: {
          chart: {
            type: 'column'
          },
          title: {
            text: this.$t('report.singleRadio')
          },
          xAxis: {
            type: 'category'
          },
          yAxis: {
            title: {
              text: this.$t('report.percentage')
            }
          },
          legend: {
            enabled: false
          },
          credits: {
            enabled: false
          },
          colors: colorConfigArr,
          plotOptions: {
            series: {
              borderWidth: 0,
              dataLabels: {
                enabled: true,
                format: '{point.y:.1f}%'
              }
            }
          },
          tooltip: {
            headerFormat: '<span style="font-size:11px">{point.name}</span>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.1f}%</b><br>'
          },
          series: [{
            colorByPoint: true,
            data: []
          }]
        }
      }
    },
    components: {
      affix,
      noDate
    },
    mounted () {
      let divWidth = document.getElementById(this.id).offsetWidth
      this.width = (divWidth - 60) / 2 + 'px'
    },
    methods: {
      toggle () {
        this.isNone = !this.isNone
        if (this.hide === 'hide') {
          this.hide = 'show'
        } else {
          this.hide = 'hide'
        }
      },
      getReturnDataOne (returnData) {
        if (!returnData || returnData.length === 0) {
          return []
        }
        let data = deepClone(returnData)
        for (let i = 0; i < data.length; i++) {
          let multiselect = getCache('questionnaireQues', returnData[i].quesId)
          if (multiselect && multiselect.isMultiselect) {
            data[i].single = true
          }
        }
        return data
      },
      // 计算表格自由区的最大长度
      getConfigLength (returnData) {
        if (!returnData || returnData.length === 0) {
          return 0
        }
        let configLength = 0
        for (let d in returnData) {
          let dataLength = returnData[d].quesAnswerTableHeader.Config.length
          if (configLength < dataLength) {
            configLength = returnData[d].quesAnswerTableHeader.Config.length
          }
        }
        return configLength
      },
      // 表格问题结果
      getNos (returnData, configLength) {
        if (!returnData || returnData.length === 0) {
          return []
        }
        let returnD = deepClone(returnData)
        let quesR = []
        let margin = 0
        for (let i = 0; i < returnD.length; i++) {
          let config = returnD[i].quesAnswerTableHeader.Config
          if (config.length < configLength) {
            margin = configLength - config.length
          }
        }
        for (let j = 0; j < margin; j++) {
          quesR.push({message: '--'})
        }
        return quesR
      },
      getSearchQueryData () {
        // 初始化查询时间
        if (this.value4) {
          let time = getDateTime(this.value4[0]).split(' ')
          let timeEnd = getDateTime(this.value4[1]).split(' ')
          this.query.create_time_begin = time[0]
          this.query.create_time_end = timeEnd[0]
        } else {
          this.query.create_time_begin = ''
          this.query.create_time_end = ''
        }
        if (this.value3) {
          let time1 = getDateTime(this.value3[0]).split(' ')
          let timeEnd1 = getDateTime(this.value3[1]).split(' ')
          this.query.return_time_begin = time1[0]
          this.query.return_time_end = timeEnd1[0]
        } else {
          this.query.return_time_begin = ''
          this.query.return_time_end = ''
        }
        // 查询条件
        let data = {
          account: this.$store.state.session.user.account,
          query: this.query
        }
        return data
      },
      search () {
        var queryData = this.getSearchQueryData()

        if (!queryData) {
          return
        }

        this.loading = true
        // 查询数据
        this.$store.dispatch('queryQuesAnwserReport', queryData).then((res) => {
          let datas = deepClone(res.data) || {}
          this.returnData = []
          for (let i in datas) {
            if (datas[i].quesAnswerTableHeader.Config.length !== 0) {
              this.returnData.push(datas[i])
            }
          }
          this.loading = false
        })
      },
      exportXlsx () {
        var queryData = this.getSearchQueryData()

        if (!queryData) {
          return
        }

        this.loading = true
        // 查询数据
        this.$store.dispatch('queryQuesAnwserReport', queryData).then((res) => {
          this.loading = false
          var datas = deepClone(res.data) || {}
          var returnData = []
          for (var i in datas) {
            if (datas[i].quesAnswerTableHeader.Config.length !== 0) {
              returnData.push(datas[i])
            }
          }

          var row = 1
          // var col = 1
          var configLength = this.getConfigLength(this.returnData)
          // var nos = this.getNos(returnData, configLength)
          var returnDataOne = this.getReturnDataOne(returnData)

          var ranges = []

          returnDataOne.forEach(item => {
            // 第一行 例： 问题
            ranges.push({
              startRow: row,
              startCol: 1,
              endRow: row,
              endCol: 1,
              value: '问题'
            })
            ranges.push({
              startRow: row,
              startCol: 2,
              endRow: row,
              endCol: configLength + 2,
              merged: true,
              value: `${item.name}:${item.context}`
            })
            row++
            // 第二行 问题结果 为什么不叫‘答案’(・∀・(・∀・(・∀・*)
            ranges.push({
              startRow: row,
              startCol: 1,
              endRow: row,
              endCol: 1,
              value: '问题结果'
            })

            if (
              item &&
              item.quesAnswerTableHeader &&
              item.quesAnswerTableHeader.Config &&
              item.quesAnswerTableHeader.Config.forEach
            ) {
              item.quesAnswerTableHeader.Config.forEach((config, i) => {
                ranges.push({
                  startRow: row,
                  startCol: i + 2,
                  endRow: row,
                  endCol: i + 2,
                  value: config.displayname
                })
              })
            }
            ranges.push({
              startRow: row,
              startCol: configLength + 2,
              endRow: row,
              endCol: configLength + 2,
              value: '结果合计'
            })
            ranges.push({
              startRow: row,
              startCol: configLength + 3,
              endRow: row,
              endCol: configLength + 3,
              value: '回访总量'
            })
            row++
            // 第三行 数量
            ranges.push({
              startRow: row,
              startCol: 1,
              endRow: row,
              endCol: 1,
              value: '数量'
            })

            if (
              item &&
              item.quesAnswerTableHeader &&
              item.quesAnswerTableHeader.Config &&
              item.quesAnswerTableHeader.Config.forEach
            ) {
              item.quesAnswerTableHeader.Config.forEach((config, i) => {
                ranges.push({
                  startRow: row,
                  startCol: i + 2,
                  endRow: row,
                  endCol: i + 2,
                  value: item.data ? item.data[config.name] : 0
                })
              })
            }
            ranges.push({
              startRow: row,
              startCol: configLength + 2,
              endRow: row,
              endCol: configLength + 2,
              value: item._totalQuesAnswers ? item._totalQuesAnswers : 0
            })
            ranges.push({
              startRow: row,
              startCol: configLength + 3,
              endRow: row,
              endCol: configLength + 3,
              value: item._totalQuesSubmitNums ? item._totalQuesSubmitNums : 0
            })

            row++
            // 第三行 机会占比
            ranges.push({
              startRow: row,
              startCol: 1,
              endRow: row,
              endCol: 1,
              value: '机会占比'
            })

            if (
              item &&
              item.quesAnswerTableHeader &&
              item.quesAnswerTableHeader.Config &&
              item.quesAnswerTableHeader.Config.forEach
            ) {
              item.quesAnswerTableHeader.Config.forEach((config, i) => {
                ranges.push({
                  startRow: row,
                  startCol: i + 2,
                  endRow: row,
                  endCol: i + 2,
                  value: (item._totalQuesAnswers === 0 || !item._totalQuesAnswers) ? '0%' : ((item.data[config.name] / item._totalQuesAnswers) * 100).toFixed(1) + '%'
                })
              })
            }
            row++
            // 第四行 单量占比
            if (item.single) {
              ranges.push({
                startRow: row,
                startCol: 1,
                endRow: row,
                endCol: 1,
                value: '单量占比'
              })

              if (
                item &&
                item.quesAnswerTableHeader &&
                item.quesAnswerTableHeader.Config &&
                item.quesAnswerTableHeader.Config.forEach
              ) {
                item.quesAnswerTableHeader.Config.forEach((config, i) => {
                  ranges.push({
                    startRow: row,
                    startCol: i + 2,
                    endRow: row,
                    endCol: i + 2,
                    value: (item._totalQuesSubmitNums === 0 || !item._totalQuesSubmitNums) ? '0%' : ((item.data[config.name] / item._totalQuesSubmitNums) * 100).toFixed(1) + '%'
                  })
                })
              }
              row++
            }
          })

          var dh = XlsxUtil.getDownloadRangesHelper(ranges)

          var timeStamp = XlsxUtil.dateFormat(new Date(), 'yyyy-MM-dd hh-mm-ss')
          dh.download(this.$t('report.questionnaireReportQuestionDetail') + timeStamp)
        })
      },
      close () {
        this.isShow = false
      },
      excels () {
        let data = {
          Method: 'exportQuesAnswerReport',
          Query: {
            reportType: 'questionnaire_report_question_detail',
            temp_id: this.query.temp_id,
            ques_id: this.query.ques_id,
            batchNos: this.query.batchNos,
            batchRemarks: this.query.batchRemarks,
            create_time_begin: '',
            create_time_end: '',
            return_time_begin: '',
            return_time_end: '',
            account: this.$store.state.session.user.account,
            type: 'exportQuesAnswerReport'
          }
        }
        // 初始化查询时间
        if (this.value4) {
          let time = getDateTime(this.value4[0]).split(' ')
          let timeEnd = getDateTime(this.value4[1]).split(' ')
          data.Query.create_time_begin = time[0]
          data.Query.create_time_end = timeEnd[0]
        } else {
          data.Query.create_time_begin = ''
          data.Query.create_time_end = ''
        }
        if (this.value3) {
          let time1 = getDateTime(this.value3[0]).split(' ')
          let timeEnd1 = getDateTime(this.value3[1]).split(' ')
          data.Query.return_time_begin = time1[0]
          data.Query.return_time_end = timeEnd1[0]
        } else {
          data.Query.return_time_begin = ''
          data.Query.return_time_end = ''
        }
        if (data.Query.ques_id.length === 0) {
          delete data.Query.ques_id
        }
        if (data.Query.batchNos.length === []) {
          delete data.Query.batchNos
        }
        if (data.Query.batchRemarks.length === []) {
          delete data.Query.batchRemarks
        }
        this.$store.dispatch('exportQuesAnwserReport', data)
      },
      exportPdf () {
        this.dialogVisible = true
      },
      confirm () {
        this.dialogVisible = false
        exportReportPdf({title: this.$t('report.questionnaireReportQuestionDetail'), id: this.id})
      },
      change () {
        this.query.batchNos = []
        this.query.batchRemarks = []
        this.query.ques_id = []
      }
    },
    computed: {
      // 计算是否显示单量占比
      returnDataOne () {
        return this.getReturnDataOne(this.returnData)
      },
      // 表格问题结果
      nos () {
        return this.getNos(this.returnData, this.configLength)
      },
      // 数量
      // 占比
      // 计算表格自由区的最大长度
      configLength () {
        return this.getConfigLength(this.returnData)
      },
      // 判断展开问卷是否显示
      unfolded () {
        if (this.returnData.length > 2) {
          return true
        }
        return false
      },
      // 展示问卷图表
      items () {
        if (!this.returnData || this.returnData.length === 0) {
          return []
        }
        let datas = []
        for (let i = 0; i < this.returnData.length; i++) {
          let hOptions = deepClone(this.options24out)
          let hOptionsO = deepClone(this.options24out1)
          let seriesArray = [{
            type: 'pie',
            name: this.$t('report.percentage'),
            data: []
          }]
          let seriesArrayO = [{
            colorByPoint: true,
            data: []
          }]
          datas.push({hOptions})
          let multiselect = getCache('questionnaireQues', this.returnData[i].quesId)
          let config = this.returnData[i].quesAnswerTableHeader.Config
          let data = this.returnData[i].data
          if (multiselect && multiselect.isMultiselect) {
            datas[i].hOptionsO = hOptionsO
            for (let j = 0; j < config.length; j++) {
              if (data) {
                seriesArrayO[0].data.push({
                  name: config[j].displayname,
                  y: parseFloat((data[config[j].name] / this.returnData[i]._totalQuesSubmitNums * 100).toFixed(1))
                })
              }
            }
            datas[i].hOptionsO.series = seriesArrayO
          }
          for (let j = 0; j < config.length; j++) {
            if (data) {
              seriesArray[0].data.push([
                `${config[j].displayname}(${data[config[j].name]})`,
                data[config[j].name]
              ])
            } else {
              seriesArray[0].data.push([
                `${config[j].displayname}(0)`,
                0
              ])
            }
          }
          datas[i].hOptions.series = seriesArray
        }
        return datas
      },
      // 批次号
      options1 () {
        let batchNo = []
        for (let b = 0; b < this.batchNumber.length; b++) {
          if (this.query.temp_id === this.batchNumber[b].dbType) {
            batchNo.push(this.batchNumber[b])
          }
        }
        return batchNo.map(batch => ({ label: batch.batchNo, value: batch.batchNo, id: batch._id }))
      },
      // 回访问题
      options2 () {
        let batchNo = []
        for (let b = 0; b < this.returnVisitQes.length; b++) {
          if (this.query.temp_id === this.returnVisitQes[b].temp_id) {
            batchNo.push(this.returnVisitQes[b])
          }
        }
        return batchNo.map(batch => ({ label: batch.name, value: batch._id }))
      },
      // 批次说明
      options3 () {
        let batchNo = []
        for (let b = 0; b < this.batchInstructions.length; b++) {
          if (this.query.temp_id === this.batchInstructions[b].dbType) {
            batchNo.push(this.batchInstructions[b])
          }
        }
        return batchNo.map(batch => ({ label: batch.batchRemark, value: batch.batchRemark, id: batch._id }))
      }
    },
    beforeMount () {
      // 按批次号搜索
      this.$store.dispatch('getCache', {type: 'getQuestionnaireImportBatchNo'}).then(agents => {
        this.batchNumber = deepClone(agents)
      })
      // 按回访问题搜索
      this.$store.dispatch('getCache', {type: 'questionnaireQues'}).then(agents => {
        this.returnVisitQes = deepClone(agents)
      })
      // 按批次说明搜索
      this.$store.dispatch('getCache', {type: 'getQuestionnaireImportBatchRemark'}).then(agents => {
        this.batchInstructions = deepClone(agents)
      })
      // 模板搜索
      this.$store.dispatch('getCache', {type: 'questionnaireTemp'}).then(agents => {
        this.options = agents.map(agent => ({ label: agent.name, value: agent._id }))
        this.query.temp_id = agents[0]._id
        this.search()
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .questionnaire_report_detail
    .notes
      margin-left 40px
    .search
      .el-form
        padding-left 18px
        .primary_btn
          margin-top 16px
      .el-form-item
        display: inline-block
        margin: 0 16px 0 0
        vertical-align top
    color $cf-gray2
    .hide
      position absolute
      width 100%
      display none
    .show
      display block
    table
      width 100%
      border 1px solid #e7e7eb
      border-bottom none
      border-spacing 0
      margin-bottom 20px
      .th
        background #f4f5f9
        .tdO
          background $cf-white
          border-right 1px solid #e7e7eb
          text-align center
      .td
        background #f4f5f9
      tr
        &:hover
          background $c-back
        td
          border-bottom 1px solid #e7e7eb
          padding 8px
    .pie
      padding 0 20px
      .title
        text-align center
        .text
          top 0
          padding 0 20px
    .toggle
      height 24px
      line-height 24px
      text-align center
      line-height 24px
      width 160px
      margin 0 auto
      margin-bottom 20px
      p
        color $c-main
        cursor pointer
        .tex
          display inline-block
          width 20px
          height 20px
          border-radius 50%
          border 1px solid #39c4a9
          line-height 20px
          text-align center
        .text
          margin-left 8px
          font-size 14px
    .tab
      .export
        .pdf
          margin 0px
      .deploy
        .tip
          margin-left 0px
        .item
            cursor pointer
.report .title{
  color: $cf-level2;
  margin: 28px 0 18px 0;
  font-weight: normal;
  position: relative;
  line-height: 16px;
}
.report .title .sign{
  position: relative;
  width: 12px;
  height: 12px;
  background: #7ccdd1;
  display: inline-block;
  z-index: 3;
}
.report .title .text{
  position: relative;
  display: inline-block;
  padding: 0 8px 0 10px;
  background: $cf-white;
  z-index: 3;
}
.report .title:after{
  content: "";
  display: inline-block;
  width: 100%;
  left: 0;
  border-bottom: 1px dashed $cf-level2;
  position: absolute;
  top: 50%;
}
.tdO{}
</style>
